<!DOCTYPE html>
<html>
<head>
    <title>用户优惠券兑换表</title>
    <#include "/header.html">
</head>
<body>
<div id="app">
    <div>
        <el-form :inline="true" v-model="q">
            <el-button type="primary" size="medium" @click="createCodeView">生成兑换码</el-button>
            <el-button type="primary" size="medium" @click="deletes">批量删除</el-button>
            <el-form-item>
                <el-input v-model="q.exchangeCode" placeholder="优惠券兑换码"></el-input>
            </el-form-item>
            <el-form-item>
                <el-input v-model="q.userId" placeholder="用户id"></el-input>
            </el-form-item>
            <el-select v-model="q.used" placeholder="是否使用">
                <el-option label="未使用" value="0"></el-option>
                <el-option label="已使用" value="1"></el-option>
            </el-select>
            <el-date-picker
                    v-model="q.beginTime"
                    type="datetime"
                    placeholder="创建时间起">
            </el-date-picker>
            <el-date-picker
                    v-model="q.endTime"
                    type="datetime"
                    placeholder="创建时间止">
            </el-date-picker>
            <el-button type="primary" size="medium" icon="el-icon-search" @click="search"></el-button>
            <el-button type="primary" size="medium" @click="rest">重置</el-button>
        </el-form>

        <el-table ref="testTable" :data="tableData" style="width:100%" border highlight-current-row class="tb-edit"
                  :default-sort="{prop: 'createDate', order: 'descending'}" @selection-change="handleSelectionChange" @row-click="handleclick">
            <el-table-column type="selection"></el-table-column>
            <el-table-column prop="id" label="序号" sortable show-overflow-tooltip></el-table-column>
            <el-table-column prop="exchangeCode" label="优惠券兑换码" sortable show-overflow-tooltip></el-table-column>
            <el-table-column prop="couponIds" label="优惠券id" sortable show-overflow-tooltip></el-table-column>
            <el-table-column prop="userId" label="用户id" sortable show-overflow-tooltip></el-table-column>
            <el-table-column prop="used" label="是否使用" sortable show-overflow-tooltip :formatter="usedFormatter"></el-table-column>
            <el-table-column prop="createDate" label="创建时间" sortable show-overflow-tooltip></el-table-column>
            <el-table-column prop="exchangeDate" label="兑卷时间" sortable show-overflow-tooltip></el-table-column>
            <el-table-column prop="disabled" label="失效" sortable show-overflow-tooltip :formatter="disabledFormatter"></el-table-column>
        </el-table>

        <div align="center">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
                           :page-sizes="[20, 50, 80, 100]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="totalCount"
                           background>
            </el-pagination>
        </div>
    </div>

    <!--生成兑换码弹窗-->
    <el-dialog title="生成兑换码" :visible.sync="dialogFormVisible" width="60%">
        <el-form :inline="true" v-loading="loading" element-loading-text="正在生成,请勿取消!" element-loading-spinner="el-icon-loading">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="选择优惠券">
                        <el-select v-model="couponIds" multiple placeholder="请选择">
                            <el-option v-for="item in couponList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="生成数量">
                        <el-input-number v-model="count"></el-input-number>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" size="medium" @click="createCode" :disabled="checkbtn">生成</el-button>
            <el-button type="primary" size="medium" @click="dialogFormVisible=false">取消</el-button>
        </div>
    </el-dialog>
</div>

<script src="${request.contextPath}/statics/js/modules/promotion/userCouponExchange.js?_${.now?long}"></script>
<style>
    /* 设置当前选中行的背景颜色 */
    .el-table__body tr.current-row>td {
        background: #c9eff5 !important;
    }
    /* 设置表主体的高度 */
    .el-table__body td,.el-table__body th{
        padding:3px;
    }
    /* 设置表头的高度 */
    .el-table__header td,.el-table__header th{
        padding:6px 0px;
    }
</style>
</body>
</html>
